<template>

	<view class="bg">
		<view class="logo">
			<image src="../../static/images/logo-add.png" mode="widthFix"></image>
		</view>

		<view class="txt1">申请获取以下权限</view>
		<view class="txt2">获得你的手机号码及公开信息（昵称、头像）</view>

		<view class="txt3" >
	        <checkbox  @click="IsCheck=!IsCheck" style="transform:scale(0.7)" value="cb" :checked="IsCheck" bindtap="checkbox" />
	        <view @click="IsCheck=!IsCheck">请阅读并同意</view>
	        <text @click="toInfo('10102')">隐私协议</text>
	    </view>

		<button class="bon" @click="getUserProfile" v-if="userbtn">点击登录</button>
		<button class="bon" type="default" open-type="getPhoneNumber"
			@getphonenumber="decryptPhoneNumber" v-if="phonebtn && IsCheck">获取手机号</button>
		<button class="bon" type="default" @click="showTips" v-if="phonebtn && !IsCheck">获取手机号</button>

		<!-- <button class="bon" bindtap="getUserInfo" wx:if="{{userbtn}}">授权用户信息</button>
	    <button class="bon" open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber" wx:if="{{phonebtn}}">授权获取手机号</button> -->
	</view>
</template>

<script>
	import urlConfig from '@/common/config.js'
	export default {
		data() {
			return {
				userbtn: false,
				phonebtn: true,
				IsCheck:false,
				wxCode:'',
				promoterCode: ''
			}
		},
		onShow() {
			if(uni.getStorageSync('promoterCode') && uni.getStorageSync('promoterCode') !== '') {
				this.promoterCode = decodeURIComponent(uni.getStorageSync('promoterCode'))
			}
			this.getopenid();
		},
		methods: {
			// 页面进来先uni.login获取code值
			getopenid() {
				var _this = this
				var openid = uni.getStorageSync('openid');
				// if (openid == '') { 
					uni.login({
						provider: 'weixin', //使用微信登录
						success: function(res) {
							console.log(res);
							if (res.code) {
										_this.getCode()
								uni.request({
									method: 'POST',
									url: urlConfig + '/weixin/login',
									header: {
										'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
									},
									data: {
										code: res.code
									},
									success(res) {
										console.log(res.data.data,1111111111111)
										uni.setStorageSync('openid', res.data.data.openid);
										uni.setStorageSync('login_token', res.data.data.token);
										// _this.openid = res.data.data.openid
										// _this.login_token = res.data.data.token
										
									}
								})
							}
						}
					}) 
				// }
				// var userid = uni.getStorageSync('userId');
				// if(userid!=''){
				//     uni.switchTab({
				//       url: '/pages/index/index',
				//     })
				// }
				
			},
			toInfo(id){
				uni.navigateTo({
					url:'/pages/article/index?id='+id
				})
			},
			getCode(){
				let that=this
					uni.login({
						provider: 'weixin', //使用微信登录
						success: function(res) {
							console.log(res);
							if (res.code) {
								that.wxCode=res.code
							}
						}
					})
			},
			showTips(){
				
					if(!this.IsCheck){
						
						uni.showToast({
							title: '请先阅读隐私协议',
							icon: 'none'
						})
						return
					}
			},
			// 获取用户信息
			getUserProfile(e) {
				if(!this.IsCheck){
					
					uni.showToast({
						title: '请先阅读隐私协议',
						icon: 'none'
					})
					return
				}
				// 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (infoRes) => {
						console.log(infoRes)
						this.name = infoRes.userInfo.nickName,
						this.logo = infoRes.userInfo.avatarUrl,
						this.address = infoRes.userInfo.city
						// this.userbtn = false,
						// this.phonebtn = true,
						uni.setStorageSync('userInfo', infoRes.userInfo);
						
						uni.showToast({
							title: '登陆成功！',
							icon: 'none'
						})
						setTimeout(()=>{
							
								uni.switchTab({
									url:'/pages/index/index'
								})
						},1500)
					}
				})
			},
			
			// 获取手机号并注册
			decryptPhoneNumber(e) {
				var openid = uni.getStorageSync('openid');
				var login_token = uni.getStorageSync('login_token');
				uni.request({
					method: 'POST',
					url: urlConfig + '/weixin/decryptphone',
					header: {
						'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
						'Authorization': login_token
					},
					data: {
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						isRegister: true,
						name: this.name,
						logo: this.logo,
						code: this.wxCode,
						address: this.address,
						promoterCode: this.promoterCode
					},
					success(res) {
						console.log(res)
						if(res.data.message=='操作成功'){
							uni.setStorageSync('userId', res.data.data.user_id);
							uni.setStorageSync('phone', res.data.data.user_phone)
							uni.setStorageSync('inviteId', res.data.data.user_name)
							console.log('getPhone', res.data.data.user_phone)
							uni.switchTab({
								url:'/pages/index/index'
							})
						}
						
					}
				})
			},
			
		}
	}
</script>

<style>
	.bg {
		padding: 234rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		height: 100%;
	}

	.logo {
		text-align: center;
	}

	.logo image {
		width: 300rpx;
		margin: auto;
		padding-bottom: 80rpx;
	}


	.bg .bon {
		width: 100%;
		background: #b81c22;
		padding: 32rpx;
		margin-top: 40rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		border-radius: 45px;
		font-weight: normal;
	}

	.txt1 {
		color: #222222;
		font-size: 34rpx;
	}

	.txt2 {
		color: #999999;
		font-size: 26rpx;
		padding: 40rpx 0;
	}

	.txt3 {
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 28rpx;
	}

/* 	.txt3 view {
		padding-left: 11rpx;
	} */

	.txt3 text {
		color: #EFAA5D;
		text-decoration: underline;
	}


	/*  */
	.Popup {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #00000050;
		z-index: 9;
	}

	.Popup .content {
		background: #ffffff;
		padding: 70rpx 50rpx;
		height: 50%;
		width: calc(100% - 60rpx);
		margin: 0 30rpx;

	}

	.Popup .content .intro {
		margin: 0 30rpx;
		width: calc(100% - 60rpx);
		height: 100%;
		overflow: auto;
		box-sizing: border-box;
		line-height: 1.8;
		font-size: 26rpx;
	}

	.columns {
		display: flex;
		justify-content: space-evenly;
	}

	.columns .bon {
		width: 40%;
		background: #EFAA5D;
		padding: 12rpx;
		margin-top: 40rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		border-radius: 45px;
	}
</style>
